<template>
	<view  :style="{'--color':color}">
		<status-bar ref='statusbar' :title='title' ></status-bar>
		<view class="row navTop j-se p-top20 p-bot20" :class="{'bgwhite':fied}">
			<block v-for="(item,index) in nav" :key="index">	
		     	<view class="nav" :class="{'navActive':current == item.status}" 
				     @click="switchNav(item.status)">{{item.name}}</view>
			</block>
		</view>
		
		<view class="viewbox auto p-top100">
			
			<view class="row bgwhite padding14 bor_radius_10 m-bot20 p-re" 
			     v-if="pageData.length" 
				 v-for="(item,index) in pageData" :key="index"
				 @click="toPlay(item)">
				 <view class="bgcolor learn white h7 padding6" 
				     v-if="item.learn">已学习{{item.learn}}/{{item.total}}</view>
				<image :src="imgUrl+item.img" mode="aspectFill" class="listImg bor_radius_10"></image>
				<view class="flex-1 d-flex f-column j-sb m-left20">
					<text class="ellipsis color_33 bold size26" :class="{'title':item.learn}">{{item.name}}</text>
					<view class="rows ellipsis_2 color_33 h6">{{item.info}}</view>
					<view class="row a-center color_cc h6">{{item.expire_date}}</view>
				</view>
			</view>
			
			<emptys v-if="!pageData.length"></emptys>
		
			
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				title:'我的课程',
				imgUrl:this.imgUrl,
				nav:[{
					name:'授课中',
					status:1,
				},{
					name:'已过期',
					status:2,
				}],
				current:1,
				fied:false,
				pageData:[],
			}
		},
		onLoad() {
			this.getHomeData();
		},
		methods: {
			getHomeData(){
				this.$http.get({
					url:'/goodsLessonsApi/myLessons',
					data:{
						status:this.current
					}
				}).then(res=>{
					if(res.code != '200') return this.$Toast(res.msg);
					this.pageData = res.data;
				})
			},
			
			
			switchNav(status){
				this.current = status;
				this.getHomeData();
			},
			
			toPlay(item){
				if(this.current == 2) return;
				this.toUrl(`/answer/play?goods_id=${item.goods_id}`)
			}
		},
		onPageScroll(e) {
			e.scrollTop > 10?this.fied = true:this.fied = false;
		},
		computed:{
			...mapState(['color','bid','vid']),
		}
	}
</script>

<style>
	page{
		background-color: #f8fafb;
	}
</style>
<style lang="scss" scoped>
	// #ifdef H5
	.navTop{
		width:100%;
		
		position: fixed;
		top:80rpx;
		left:0;
		z-index:10;
	}
	// #endif
	// #ifdef MP-WEIXIN
	.navTop{
		width:100%;
		
		position: fixed;
		top:0;
		left:0;
		z-index:10;
	}
	// #endif
	.nav{
		color:#333333;
		font-size:26rpx;
		padding-bottom: 10rpx;
		position: relative;
	}
	.navActive{
		font-size:30rpx;
	}
	.navActive::after{
		content: '';
		width:30rpx;
		height: 2px;
		position: absolute;
		left:50%;
		bottom: 2rpx;
		background-color: var(--color);
		transform: translate(-50%,0);
	}
	.listImg{
		width:168rpx;
		height: 168rpx;
	}
	.learn{
		position: absolute;
		top:0;
		right: 0;
	}
	.title{
		width:380rpx;
	}
</style>
